import {defineComponent} from '../../src'


export default defineComponent(props => {
    const API_URL = 'https://api.github.com/repos/vuejs/vue-next/commits?per_page=3&sha='

    return {
        template: `
	<h1>Latest Vue.js Commits</h1>
	<template v-for="branch in branches">
	  <input
	    type="radio"
	    :id="branch"
	    :value="branch"
	    name="branch"
	    v-model="currentBranch"
	  />
	  <label :for="branch">{{ branch }}</label>
	</template>
	<p>vuejs/vue@{{ currentBranch }}</p>
	<ul>
	  <li v-for="{ html_url, sha, author, commit } in commits">
	    <a :href="html_url" target="_blank" class="commit">{{ sha.slice(0, 7) }}</a>
	    - <span class="message">{{ truncate(commit.message) }}</span><br/>
	    by 
	    <span class="author">
	      <a :href="author.html_url" target="_blank">{{ commit.author.name }}</a>
	    </span>
	    at <span class="date">{{ formatDate(commit.author.date) }}</span>
	  </li>
	</ul>
	`,
	data() {
            return {
                branches: ['master', 'v2-compat'],
		currentBranch: 'master',
		commits: null
	    }
	},
	methods: {
            truncate(v) {
                const newline = v.indexOf('\n')
		return newline > 0 ? v.slice(0, newline) : v
	    },
	    formatDate(v) {
		return v.replace(/T|Z/g, ' ')
	    }
	},
	async effect() {
            const res = await fetch(`${API_URL}${this.currentBranch}`)
	    const data = await res.json()
	    this.commits = data
	}
    }
})